let title = 'drag'
// 按钮级别控制权限
function fun() {
  return {
    // 当被绑定的元素挂载到 DOM 中时……el指令绑定的dom元素
    mounted: function (el) {
      el.style.position = 'absolute'
      let flag = false
      el.onmousedown = (e) => {
        flag = true
        var ex = e.clientX - el.offsetLeft
        var ey = e.clientY - el.offsetTop
        el.onmousemove = (e) => {
          var l = e.clientX - ex
          var t = e.clientY - ey
          //此处的判断是为了防止拖拽框被拖出屏幕可视区域
          if (l < 0) {
            l = 0
          } else if (l > document.documentElement.clientWidth - el.offsetWidth) {
            l = document.documentElement.clientWidth - el.offsetWidth
          }
          if (t < 0) {
            t = 0
          } else if (t > document.documentElement.clientHeight - el.offsetHeight) {
            t = document.documentElement.clientHeight - el.offsetHeight
          }
          if (flag) {
            el.style.left = l + 'px'
            el.style.top = t + 'px'
          }
        }
        // 用于判断鼠标是否在点击的dom上,true为可拖拽，false不可拖拽
        window.document.body.onmouseover = function (event) {
          if (e == event.target) {
            flag = true
          } else {
            flag = false
          }
        }
        // 松开鼠标禁止拖拽
        el.onmouseup = (e) => {
          flag = false
          el.onmousemove = null
          el.onmouseup = null
        }
      }
    }
  }
}

module.exports = {
  title,
  fun
}
